window.addEventListener("load", function () {
    // 获取颜色元素
    const color = document.querySelector("#color")

    // 获取 range 元素
    const range = document.querySelector("#range")

    // 设置初始的画笔颜色和粗细，画图时用的
    let colorValue = color.value
    let rangeValue = range.value

    // 给颜色选择器加 change 事件，以此来更新颜色
    color.addEventListener("change", () => {
        /* 变化之后就会改变 value 值 */
        colorValue = color.value
    })

    // 同理来改变画笔粗细
    range.addEventListener("change", () => {
        rangeValue = range.value
    })

    let flag = false

    // 画图
    // 1) 获取画布
    const cvs = document.querySelector("canvas")
    // 2) 返回一个 2d 的画图环境
    const ctx = cvs.getContext("2d")
    // 3) 给画布添加鼠标按下事件
    cvs.addEventListener("mousedown", (e) => {
        // 按下之后让 flag 变为 true
        flag = true

        // 3-1. 获取鼠标的坐标来确定画布里面的初始位置
        // 获取画布距离浏览器可视区的顶部和左部的大小
        // getBoundingClientRect() 这个方法内有六个值，分别是 left top right bottom width height
        const top = cvs.getBoundingClientRect().top
        const left = cvs.getBoundingClientRect().left

        // 3-2. 求出鼠标在画布内容的位置
        const mouseX = e.pageX - left
        const mouseY = e.pageY - top

        // 3.3. 先设置好绘图的画笔颜色和粗细
        ctx.strokeStyle = colorValue
        ctx.lineWidth = rangeValue

        // 3.4 设置绘制的图像是圆角的
        ctx.lineCap = "round"

        // 3.4. 开始一个路径，然后确定开始绘图的起点位置
        ctx.beginPath()
        ctx.moveTo(mouseX, mouseY)
    })
    // 4) 给画布添加鼠标移动事件
    cvs.addEventListener("mousemove", (e) => {
        // 4.1. 获取鼠标位置
        const top = cvs.getBoundingClientRect().top
        const left = cvs.getBoundingClientRect().left
        const mouseX = e.pageX - left
        const mouseY = e.pageY - top

        // 4.2 开始连接线条
        if (flag) {
            // 这个用来确定要去的位置
            ctx.lineTo(mouseX, mouseY)
            // 封闭连接
            ctx.stroke()
        }
    })

    // 5-1 解决 bug1，得让鼠标按下才吐墨绘图，通过一个 flag 变量来实现
    // 5-2 解决 bug2，现在鼠标弹起了还画图，加一个鼠标弹起事件
    cvs.addEventListener("mouseup", () => {
        flag = false
    })

    // 6) 实现清空画布功能
    const clear = document.querySelector(".clear")
    clear.addEventListener("click", () => {
        // clearRect 方法可以清空一定区域内的内容，填写的值为 x坐标，y坐标，清除的宽度，清除的高度，我们
        // 全部都要清除，所以直接从左上角开始，宽高为画布的宽高
        ctx.clearRect(0, 0, 1000, 500)
    })
})
